<!-- 统计分析 -> 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import Api from "@/api";
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      data_1: 0,
      data_2: 0,
      data_3: 0
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      Api.getDataOfGRZ().then(res => {
        this.data_1 = res.features.length;
      });
      Api.getDataOfHRZ().then(res => {
        this.data_2 = res.features.filter(v => {
          return v.properties.SFZG === '是'
        }).length;
        this.data_3 = res.features.length - this.data_2;
      });
    }
  }
});
</script>
<template>
  <div class="section-one">
    <GlobalCard :mainTitle="'供热数据总览'">
      <template #body>
        <!-- 代码 -->
        <div id="Gongresheshizongshu">
          <div class="item data-2">
            <div class="name font-HONGMENG-SC">热源</div>

            <div class="numb">
              <span class="data data-2 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_1" :duration="3000" :autoplay="true" />
              </span> <span class="unit font-PINGFANG_MEDIUM"> 个</span>
            </div>
          </div>

          <div class="item data-3">
            <div class="name font-HONGMENG-SC">居民换热站</div>

            <div class="numb">
              <span class="data data-3 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_2" :duration="3000" :autoplay="true" />
              </span>
              <span class="unit "> 个</span>
            </div>
          </div>

          <div class="item data-33">
            <div class="name font-HONGMENG-SC">自管换热站</div>

            <div class="numb">
              <span class="data data-33 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_3" :duration="3000" :autoplay="true" />
              </span>
              <span class="unit "> 个</span>
            </div>
          </div>
        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-one {
  position: fixed;
  top: 11rem;
  left: 2rem;
  height: 18rem;
}

#Gongresheshizongshu {
  height: 11rem;
  display: flex;
  justify-content: space-around;
  align-items: center;

  &>.item {
    font-size: 1rem;
    text-align: center;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(./images/item-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &>.icon {
      width: 7.5rem;
      height: 5rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      top: -8px;
      left: -4px;

      &.data-1 {
        background-image: url(./images/icon-1.svg);
      }

      &.data-2 {
        background-image: url(./images/icon-2.svg);
        left: 0;
      }

      &.data-3 {
        background-image: url(./images/居民.svg);
        left: 0;
      }

      &.data-33 {
        background-image: url(./images/自管.svg);
        left: 0;
      }
    }

    &>.numb {
      margin-top: 1.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &>span.data {
        font-size: 2.5rem;
        font-weight: bolder;

        &.data-2 {
          color: #168cff;
        }

        &.data-3 {
          color: #40f148;
        }

        &.data-33 {
          color: #f4ea2a;
        }
      }

      &>span.unit {
        margin-top: 3px;
        margin-left: 5px;
        font-size: 1.5rem;
      }
    }

    &>.name {
      font-size: 1.5rem;
      font-family: "alimamashuheiti" !important;
    }
  }

  .data-2 .numb {
    left: 0;
  }
}
</style>